import React, {useState} from "react";
import Logs from "./Components/Logs/Logs";
import Logsform from "./Components/Logsform/Logsform";
import "./App.css";

const App = () => {
    //每条log数据 方便子组件渲染
    const [logsData,setlogsData] = useState([
        {
            key:'001',
            date:new Date(2023,5-1,4),
            desc:"吃饭",
            time:30
        },
        {
            key:'002',
            date:new Date(2024,5-1,2),
            desc:"睡觉",
            time:20
        },
        {
            key:'003',
            date:new Date(2024,9-1,21),
            desc:"充电",
            time:10
        }
    ]);
    
    //回调函数 调用更新log数据
    const SaveLogHandler = (newLog) => {
        newLog.key = Date.now()
        setlogsData([newLog, ...logsData])
    }
    // 删除数据
    // const deleteLogByIndex = (index) => {
    //     setlogsData(prevLogs => {
    //         const newLogs = [...prevLogs]
    //         //splice改变原数组，返回值为删除数组
    //         newLogs.splice(index,1);
    //         // if (newLogs[0] === undefined) console.log('没了');
    //         return newLogs
    //         // return [...prevLogs].splice(index, 1)
            
    //     })
    // }
    const deleteLogById = (id) => {
        setlogsData(prevLogs => {
           return prevLogs.filter(item => item.key !== id)
            
        })
    }

    return <div className="app">
        <Logsform onSaveLogs={SaveLogHandler}/>
        <Logs logsData={logsData} deleteLogById={deleteLogById} />
    </div>
};

export default App;
